import React from "react";
import PropTypes from "prop-types";
import { CWidgetStatsD, CRow, CCol } from "@coreui/react";
import CIcon from "@coreui/icons-react";
import { cilFire } from "@coreui/icons";
import { CChart } from "@coreui/react-chartjs";

const WidgetsBrand = (props) => {
  const { classes } = props;

  const chartOptions = {
    elements: {
      line: {
        tension: 0.4,
      },
      point: {
        radius: 0,
        hitRadius: 10,
        hoverRadius: 4,
        hoverBorderWidth: 3,
      },
    },
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false,
      },
    },
    scales: {
      x: {
        display: false,
      },
      y: {
        display: false,
      },
    },
  };

  return (
    <CRow className={props.className} xs={{ gutter: 4 }}>
      {classes.map((x) => (
        <CCol sm={12} xl={12} xxl={6}>
          <CWidgetStatsD
            {...(props.withCharts && {
              chart: (
                <CChart
                  className="position-absolute w-100 h-100"
                  type="line"
                  data={{
                    labels: [
                      "January",
                      "February",
                      "March",
                      "April",
                      "May",
                      "June",
                      "July",
                    ],
                    datasets: [
                      {
                        backgroundColor: "rgba(255,255,255,.1)",
                        borderColor: "rgba(255,255,255,.55)",
                        pointHoverBackgroundColor: "#fff",
                        borderWidth: 2,
                        data: [65, 59, 84, 84, 51, 55, 40],
                        fill: true,
                      },
                    ],
                  }}
                  options={chartOptions}
                />
              ),
            })}
            icon={
              <CIcon icon={cilFire} height={52} className="my-4 text-white" />
            }
            values={[
              { title: "课堂名称", value: x.theClassName },
              { title: "观看数量", value: x.views },
            ]}
            color="danger"
          />
        </CCol>
      ))}
    </CRow>
  );
};

WidgetsBrand.propTypes = {
  className: PropTypes.string,
  withCharts: PropTypes.bool,
};

export default WidgetsBrand;
